<template>
	<div class="app-list">
		<a-list
			bordered
			:data-source="filterData.slice(page * max, (page + 1) * max)"
		>
			<template #header>
				<div class="header">Popular Libraries</div>
				<a-input v-model:value="name" placeholder="input library name ..." />
			</template>
			<template #renderItem="{ item }">
				<a-list-item
					@click="router.push({ path: 'about', query: { name: item } })"
					>{{ item }}</a-list-item
				>
			</template>
		</a-list>
		<div class="btn-list">
			<a-button @click="page--" :disabled="page == 0"> BACK </a-button>
			<p>
				{{ page + 1 }} / {{ Math.floor(filterData.length / (max + 1)) + 1 }}
			</p>
			<a-button
				@click="page++"
				:disabled="page === Math.floor(filterData.length / (max + 1))"
			>
				NEXT
			</a-button>
		</div>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

export default defineComponent({
	name: "app-list",
	setup() {
		const router = useRouter();
		const data = ref([] as string[]);
		const itemController = reactive({
			page: 0,
			length: 0,
			max: 9,
			name: "",
		});

		const filterData = computed(() => {
			itemController.page = 0;
			return data.value.filter((name) => name.includes(itemController.name));
		});

		axios.get<string[]>("https://api.bootcdn.cn/names.min.json").then((res) => {
			data.value = res.data;
			itemController.page = 0;
			itemController.length = res.data.length;
		});

		return {
			data,
			router,
			filterData,
			...toRefs(itemController),
		};
	},
});
</script>

<style lang="scss" scoped>
.app-list {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	padding-top: 40px;

	.btn-list {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding-top: 30px;
		width: 40%;
		@media screen and (max-width: 750px) {
			width: 60%;
		}
		@media screen and (max-width: 378px) {
			width: 90%;
		}
	}
	.header {
		text-align: center;
		font-weight: 500;
		padding-bottom: 15px;
	}
	.ant-list {
		width: 40%;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		@media screen and (max-width: 750px) {
			width: 60%;
		}
		@media screen and (max-width: 378px) {
			width: 90%;
		}

		.ant-list-item:hover {
			background-color: whitesmoke;
			font-weight: bold;
		}
	}
	.ant-list-item {
		cursor: pointer;
	}
}
</style>
